<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>

	<body>
		<div id="x" style="width: 200px;height: 200px;background-color: #DB5D5D;float: left;">wait to hide</div>
		<div style="width: 200px;height: 200px;background-color: #64B26F; float: left;">xxxxxxx</div>
		<button id="btn1">hide</button>
		<button id="btn2">none</button>
		<script type="text/javascript">
			window.onload = function(){
				var x = document.getElementById("x");
				var btn1 = document.getElementById("btn1");
				var btn2 = document.getElementById("btn2");
				btn1.onclick = function(){
					hidee(x);
					return false;
				};
				btn2.onclick = function(){
					hidee(x,true);
					return false;
				};
			};
			function hidee(e,f){
				if(f){
					e.style.display = "none";
				}else{
					//保留元素占有的位置
					e.style.visibility = "hidden";
				}
			}
		</script>
		
	</body>

</html>